$panel-app-header: (
  'color': getCssVar(color, primary, text),
  'color-1': getCssVar(color, text, 5),
  'bg-color': getCssVar(color, primary),
  'bg-color-1':getCssVar(color, bg, 5),
  'menu-color': getCssVar(color, text, menu),
  'hover-color': getCssVar(color, primary, hover, text),
  'hover-bg-color': getCssVar(color, primary, hover),
  'active-color': getCssVar(color, primary, active, text),
  'active-bg-color': getCssVar(color, primary, active),
  'border-color': getCssVar(color, border),
  'color-icon-0': getCssVar(color, icon, 0),
  'color-icon-1': getCssVar(color, icon, 1),
  'horizontal-color': getCssVar(color, primary, text),
  'horizontal-color-1':getCssVar(color, text, 5),
  'horizontal-bg-color': getCssVar(color, primary),
  'horizontal-bg-color-1': getCssVar(color, bg, 5),
  'horizontal-hover-color': getCssVar(color, primary, hover, text),
  'horizontal-hover-bg-color': getCssVar(color, primary, hover),
  'horizontal-active-color': getCssVar(color, primary, active, text),
  'horizontal-active-bg-color': getCssVar(color, primary, active),
  'horizontal-menu-color': getCssVar(color, text, menu),
  'horizontal-color-icon-0': getCssVar(color, icon, 0),
  'horizontal-color-icon-1': getCssVar(color, icon, 1),
);

@include b(panel-app-header) {
  @include set-component-css-var('panel-app-header', $panel-app-header);
  #{getCssVarName(color, text, 0)}: getCssVar(panel-app-header, color);
  #{getCssVarName(color, text, 1)}: getCssVar(panel-app-header, color);
  #{getCssVarName(color, text, 2)}: getCssVar(panel-app-header, color);
  #{getCssVarName(color, text, 3)}: getCssVar(panel-app-header, color);
  width: 100%;
  height: 100%;
  color: getCssVar(panel-app-header, color);
  background-color: getCssVar(panel-app-header, bg, color);

  * {
    // 主要色
    #{getCssVarName(color, text, menu)}: getCssVar(panel-app-header, menu, color);
    #{getCssVarName(color, primary)}: getCssVar(panel-app-header, bg, color);
    #{getCssVarName(color, primary, text)}: getCssVar(panel-app-header, color);
    #{getCssVarName(color, primary, hover)}: getCssVar(panel-app-header, hover, bg, color);
    #{getCssVarName(color, primary, hover, text)}: getCssVar(panel-app-header, hover, color);
    #{getCssVarName(color, primary, active)}: getCssVar(panel-app-header, active, bg, color);
    #{getCssVarName(color, primary, active, text)}: getCssVar(panel-app-header, active, color);

    // 图标颜色
    #{getCssVarName(color, icon, 0)}: getCssVar(panel-app-header, color, icon, 0);
    #{getCssVarName(color, icon, 1)}: getCssVar(panel-app-header, color, icon, 1);

    // 次要色
    #{getCssVarName(color, text, 5)}: getCssVar(panel-app-header, color, 1);
    #{getCssVarName(color, bg, 5)}: getCssVar(panel-app-header, bg, color, 1);

    // TODO 特殊需求 在导航栏中菜单激活色和悬浮色相反
    @include b(control-appmenu) {
      >.el-menu {
        #{getCssVarName(color, primary, hover)}: getCssVar(panel-app-header, active, bg, color);
        #{getCssVarName(color, primary, hover, text)}: getCssVar(panel-app-header, active, color);
        #{getCssVarName(color, primary, active)}: getCssVar(panel-app-header, hover, bg, color);
        #{getCssVarName(color, primary, active, text)}: getCssVar(panel-app-header, hover, color);
      }
    }
  }

  >.#{bem(row)} {
    height: 100%;
  }
}

@include b(panel-app-header) {
  @include m(horizontal) {
    #{getCssVarName(color, text, 0)}: getCssVar(panel-app-header, horizontal, color);
    #{getCssVarName(color, text, 1)}: getCssVar(panel-app-header, horizontal, color);
    #{getCssVarName(color, text, 2)}: getCssVar(panel-app-header, horizontal, color);
    #{getCssVarName(color, text, 3)}: getCssVar(panel-app-header, horizontal, color);
    color: getCssVar(panel-app-header, horizontal, color);
    background-color: getCssVar(panel-app-header, horizontal, bg, color);

    * {
      // 主要色
      #{getCssVarName(color, text, menu)}: getCssVar(panel-app-header, horizontal, menu, color);
      #{getCssVarName(color, primary)}: getCssVar(panel-app-header, horizontal, bg, color);
      #{getCssVarName(color, primary, text)}: getCssVar(panel-app-header, horizontal, color);
      #{getCssVarName(color, primary, hover)}: getCssVar(panel-app-header, horizontal, hover, bg, color);
      #{getCssVarName(color, primary, hover, text)}: getCssVar(panel-app-header, horizontal, hover, color);
      #{getCssVarName(color, primary, active)}: getCssVar(panel-app-header, horizontal, active, bg, color);
      #{getCssVarName(color, primary, active, text)}: getCssVar(panel-app-header, horizontal, active, color);

      // 图标颜色
      #{getCssVarName(color, icon, 0)}: getCssVar(panel-app-header, horizontal, color, icon, 0);
      #{getCssVarName(color, icon, 1)}: getCssVar(panel-app-header, horizontal, color, icon, 1);

      // 次要色
      #{getCssVarName(color, text, 5)}: getCssVar(panel-app-header, horizontal, color, 1);
      #{getCssVarName(color, bg, 5)}: getCssVar(panel-app-header, horizontal, bg, color, 1);

      // TODO 特殊需求 在导航栏中菜单激活色和悬浮色相反
      @include b(control-appmenu) {
        >.el-menu {
          #{getCssVarName(color, primary, hover)}: getCssVar(panel-app-header, horizontal, active, bg, color);
          #{getCssVarName(color, primary, hover, text)}: getCssVar(panel-app-header, horizontal, active, color);
          #{getCssVarName(color, primary, active)}: getCssVar(panel-app-header, hover, horizontal, bg, color);
          #{getCssVarName(color, primary, active, text)}: getCssVar(panel-app-header, horizontal, hover, color);
        }
      }
    }
  }
}
